<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="librarian/common :: head"></th:block>

<body>
  <div class="container-scroller">
    <div class="container-fluid page-body-wrapper">
      <div class="row">
        <div class="content-wrapper full-page-wrapper d-flex align-items-center auth-pages">
          <div class="card col-lg-4 mx-auto">
            <div class="card-body px-5 py-5">
              <h2>Mandarin - Librarian</h2>
              <h3 class="card-title text-left mb-3">Retrieve password</h3>



              <div>
                <div id="inputIfo">
                <div class="form-group">
                  <label>Username or PhoneNumber *</label>
                  <input id="login-username" type="text" name="loginUsername" required data-msg="Please enter your username" class="form-control p_input">
                </div>
                <div class="text-center">
                  <button id="login" class="btn btn-primary btn-block enter-btn">Submit</button>
                </div>
                </div>
              </div>



            </div>
          </div>
        </div>
        <!-- content-wrapper ends -->
      </div>
      <!-- row ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->
  <!-- plugins:js -->

  <div th:replace="librarian/common :: scripts"></div>

  <script>

    $("#login").bind("click", function () {


      let formData = new FormData();
        formData.append("name", $("#login-username").val());
   

        $.ajax({
          // TODO: forget password
          url: "/api/user/"+$("#login-username").val()+"/password/retrieve",
          type: "POST",
          dataType: "json",
          data: formData,
          processData: false,
          contentType: false,
          success: function (resp) {
            $("#inputIfo").empty();
            $("#inputIfo").append("<div class=\"form-group\"><img height=\"20\" width=\"20\" src=\"/librarian/images/dashboard/img_success.jpg\"/>"+"<span>&nbsp;&nbsp;Password has sent to your email.</span></div><div class=\"text-center\"><button onclick=\"location='login.html'\" class=\"btn btn-primary btn-block enter-btn\">return to login</button></div>")
            // $("#list").append("<span>Password has sent to your email.</span><button onclick=\"location='login.html'\" class=\"btn btn-primary btn-block enter-btn\">return to login</button>");
          },
          error: function (resp) {
            alertError(resp.responseJSON.message);
          }
        })
      })
    </script>
  <!-- endinject -->
</body>

</html>
